<script setup lang="ts">
import { ref } from 'vue'

defineProps<{ msg: string }>()

const count = ref(0)

import { useRouter } from 'vue-router'

const router = useRouter()
function goBack(){
  router.back()
}
import { useCounterStore } from '@/store/modules/counterStore'
const counterStore = useCounterStore()
import { ipcRenderer } from "electron";
import { onMounted, onUnmounted } from 'vue'


function saveTest() {
  //同步通信测试
  const result = ipcRenderer.sendSync("event-on-test", "同步通信测试！");
  console.log(result);
  //异步通信测试
  ipcRenderer.invoke("event-handle-test", "异步通信测试！").then((res) => {
    console.log(res);
  });
  //异步保存一次后主进程移除监听，再次点击保存报错
  ipcRenderer.invoke("event-handleOnce-test", "异步处理一次！").then((res) => {
    console.log(res);
  });

}
function toBothWay(){
  ipcRenderer.invoke("eventBothWay","异步发给主进程的消息");
}
onMounted(()=>{
    ipcRenderer.on("event-from-main",eventFromMain);
    ipcRenderer.on("eventBothWay",eventBothWay);
});
onUnmounted(()=>{
  ipcRenderer.removeListener("event-from-main",eventFromMain);
  ipcRenderer.on("eventBothWay",eventBothWay);
}); 
// 来自主进程的消息
function eventFromMain(e:any,data:string){
  console.log("监听主线程消息:",data)
}
function eventBothWay(e:any,data:string){
  console.log("子进程监听的消息：",data);
}
</script>

<template>
  <h1>当前的计数为：{{ counterStore.counter }}  双倍值为：{{ counterStore.doubleCounter }}</h1>
  <ul>
    <li><a @click="saveTest">进程通信测试</a></li>
    <li><a @click="toBothWay()">双向通信</a></li>
    <li>
      <el-icon size="25" color="red">
        <i-ep-edit />
      </el-icon>
    </li>
    <li>
      <el-button type="warning" @click="counterStore.counter++">直接操作state去改变值</el-button>
    </li>
    <li>
      <el-button type="info" @click="counterStore.increment">increment</el-button>
    </li>
  </ul>
</template>

<style scoped>
ul {
  list-style: none;
}
</style>